<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-DateTimeBox</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Initialize Value for DateTime</h2>
		<p>The value is initialized when DateTimeBox has been created.</p>
		<div style="margin:20px 0;"></div>
		<input class="easyui-datetimebox" value="10/11/2012 2:3:56" style="width:200px">
		
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Display Seconds</h2>
		<p>The user can decide to display seconds part or not.</p>
		<div style="margin:20px 0;">
			<span>Show Seconds: </span>
			<input type="checkbox" checked onchange="$('#dt').datetimebox({showSeconds:$(this).is(':checked')})">
		</div>
		<input id="dt" class="easyui-datetimebox" style="width:200px">
	
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Fluid DateTimeBox</h2>
		<p>This example shows how to set the width of DateTimeBox to a percentage of its parent container.</p>
		<div style="margin:20px 0;"></div>
		<p>width: 50%</p>
		<input class="easyui-datetimebox" style="width:50%">
		<p>width: 30%</p>
		<input class="easyui-datetimebox" style="width:30%">
	
		<!----------------------------------------------------------------------------------------------------------------------------->
		<h2>Basic DateTimeBox</h2>
		<p>Click the calendar image on the right side.</p>
		<div style="margin:20px 0;"></div>
		<input class="easyui-datetimebox" required style="width:200px">
	</body>

</html>